<template>
  <div>
    <!--<Button type="primary" @click="editRichText">进入编辑</Button>-->
    <Card>
      <p slot="title">编辑轮播图页面</p>
      <div class="richBox">
        <div id="navBar"></div>
        <div id="edit" ref="edit"></div>
      </div>
    </Card>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'rich-text',
  data () {
    return {
      html: '',
      editData: {}
    }
  },
  props: ['value'],
  methods: {
    send (blob, fn) {
      let formData = new FormData()
      formData.append('detailImages', blob, 'file.jpg')
      this.$ajax.post('/goods/manage/upload/goods/detail/images', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((res) => {
        res.data.data.data.forEach((item, index) => {
          fn('https://hycos-1257620396.file.myqcloud.com' + item)
        })
      })
    },
    smallImg (f, insert) {
      let _self = this
      let reader = new FileReader()
      let img = new Image()
      let canvas = document.createElement('canvas')
      let context = canvas.getContext('2d')
      img.onload = function () {
        // 图片原始尺寸
        let originWidth = this.width
        let originHeight = this.height
        // 最大尺寸限制
        let maxWidth = 860
        let maxHeight = 860
        // 目标尺寸
        let targetWidth = originWidth
        let targetHeight = originHeight
        // 图片尺寸超过400x400的限制
        if (originWidth > maxWidth || originHeight > maxHeight) {
          if (originWidth / originHeight > maxWidth / maxHeight) {
            // 更宽，按照宽度限定尺寸
            targetWidth = maxWidth
            targetHeight = Math.round(maxWidth * (originHeight / originWidth))
          } else {
            targetHeight = maxHeight
            targetWidth = Math.round(maxHeight * (originWidth / originHeight))
          }
        }
        // canvas对图片进行缩放
        canvas.width = targetWidth
        canvas.height = targetHeight
        // 清除画布
        context.clearRect(0, 0, targetWidth, targetHeight)
        // 图片压缩
        context.drawImage(img, 0, 0, targetWidth, targetHeight)
        // canvas转为blob并上传
        canvas.toBlob(function (blob) {
          _self.send(blob, insert)
        }, 'image/jpeg')
      }
      reader.onload = function (e) {
        img.src = e.target.result
      }
      reader.readAsDataURL(f)
    },
    initData (val) {
      this.editData.txt.html(val)
    },
    getRichData () {
      return this.editData.txt.html()
    }
  },
  mounted () {
    let _self = this
    let editor = new E('#navBar', '#edit')
    editor.customConfig.uploadImgServer = '/upload' // 图片上传路径
    editor.customConfig.showLinkImg = false // 隐藏网络图片tab
    editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024 // 设置大小
    // 图片上传错误时提醒
    editor.customConfig.customAlert = function (info) {
      // info 是需要提示的内容
      _self.$message.error(info)
    }
    editor.customConfig.customUploadImg = function (files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法

      // 上传代码返回结果之后，将图片插入到编辑器中
      files.forEach((item, index) => {
        _self.smallImg(item, insert)
      })
    }
    editor.customConfig.onchange = function (html) {
      // 监控变化，同步更新到 textarea
      _self.html = html
      _self.$emit('input', _self.html)
    }
    // 菜单栏配置
    editor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'image', // 插入图片
      'table', // 表格
      'undo', // 撤销
      'redo' // 重复
    ]
    editor.create()
    // console.log(this.htmlVal)
    // editor.txt.html(this.htmlVal)
    this.editData = editor
    this.html = editor.txt.html()
    this.$refs.edit.style.width = '100%'
  }
}
</script>

<style scoped>
  .w-e-toolbar{
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    width: 100%;
  }
  #edit{
    border: 1px solid #ccc;
    min-height: 300px;
    height: 400px;
    overflow: auto;
    z-index: 998 !important;
  }
  .richBox{
    /*width: 800px;*/
    /*margin: 0 auto;*/
    padding: 20px;
  }
</style>
